<template>
    <div>
        <!-- 顶部滑动条 -->
        <div id="slider" class="mui-slider">
            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll">
                    <a :class="['mui-control-item', item.id == 0 ? 'mui-active' : ''] " v-for="item in categoryList" :key="item.id">
                        {{ item.title }}
                    </a>
                </div>
            </div>
		</div>
    </div>
</template>

<script>
//导入mui.js
import mui from '../../lib/mui/js/mui.min.js'
//导入mui中Toast组件
import { Toast } from 'mint-ui';

export default {
    data() {
        return {
            categoryList: []
        }
    },
    methods: {
        getCategoryList() {
            this.$http.get('vue/getCategoryList').then(result => {
                if (result.body.status === 0) {
                    this.categoryList = result.body.message;
                    this.categoryList.unshift({id: 0,title: '全部'});
                } else {
                    Toast('获取评论列表失败')
                }
            })
        }
    },
    mounted() {     //当组件中的DOM结构被渲染好并放到页面中后 会执行这个钩子函数    如果要操作元素最好在mounted()中，因为此时的DOM元素是最新的
        //初始化滑动控件
        mui('.mui-scroll-wrapper').scroll({
            deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
    },
    created() {
        this.getCategoryList();
    }
}
</script>

<style lang="scss" scoped>
    //用于指定某个区域是否允许用户操作 以及如何响应用户操作
    * {
        touch-action: pan-y;    //启用单指垂直平移手势流畅度
    }

</style>